<template>
  <div class="myself">
    <h2>信息编辑</h2>
    <el-tabs type="border-card">
      <el-tab-pane label="个人信息编辑">
        <el-form ref="form" :model="form" label-width="80px" size="medium">
          <el-form-item label="头像">
            <el-upload
              :action="$axios.defaults.baseURL+'/uploads'"
              :show-file-list="false"
              :on-success="uplogSuccess"
              class="avatar-uploader"
            >
              <img v-if="form.avatar" :src="form.avatar" class="avata"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="昵称:">
            <el-input v-model="form.nickname"></el-input>
          </el-form-item>
          <el-form-item label="邮箱:">
            <el-input v-model="form.mail"></el-input>
          </el-form-item>
          <el-form-item label="qq:">
            <el-input v-model="form.qq"></el-input>
          </el-form-item>
          <el-form-item label="电话:">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="个人简介:">
            <el-input type="textarea" v-model="form.synopsis" rows="4"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="实名认证">
        <el-steps :active="form.realstate" align-center>
          <el-step title="填写个人信息" description></el-step>
          <el-step title="审核中" description></el-step>
          <el-step title="认证通过" description></el-step>
        </el-steps>
        <el-form ref="form" :model="form" label-width="80px" size="medium">
          <el-form-item label="姓名:">
            <el-input
              v-model="student.realname"
              :disabled="form.realstate ===2|| form.realstate === 3"
            ></el-input>
          </el-form-item>
          <el-form-item label="学号:">
            <el-input
              v-model="student.studentid"
              :disabled="form.realstate ===2 || form.realstate === 3"
            ></el-input>
          </el-form-item>
          <el-form-item label="学生证:">
            <el-upload
              :action="$axios.defaults.baseURL+'/uploads'"
              list-type="picture-card"
              :on-success="studentUploadSuccess"
              :on-remove="studentHandleRemove"
              :file-list="this.student.studentcard"
              :disabled="form.realstate ===2|| form.realstate === 3"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmitStudent"
              :disabled="form.realstate ===2|| form.realstate === 3"
            >确定
            </el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="公司认证">
        <el-steps :active="form.companystate" align-center>
          <el-step title="填写公司信息" description></el-step>
          <el-step title="等待审核" description></el-step>
          <el-step title="认证通过" description></el-step>
        </el-steps>
        <el-form ref="form" :model="company" label-width="80px" size="medium">
          <el-form-item label="公司名称:">
            <el-input v-model="company.companyname"
                      :disabled="form.companystate ===2|| form.companystate === 3"></el-input>
          </el-form-item>
          <el-form-item label="公司信息:">
            <el-upload
              :disabled="form.companystate ===2|| form.companystate === 3"
              :action="$axios.defaults.baseURL+'/uploads'"
              list-type="picture-card"
              :on-success="companyUploadSuccess"
              :on-remove="companyHandleRemove"
              :file-list=" this.company.companyimg"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog>
              <img width="100%" :src="company.companyimg" alt/>
            </el-dialog>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :disabled="form.companystate ===2|| form.companystate === 3"
              @click="onSubmitCompany"
            >确定
            </el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'myself',
  data () {
    return {
      student: {
        m: 'student',
        realname: '',
        studentid: '',
        studentcard: []
      },
      company: {
        m: 'company',
        companyname: '',
        companyimg: []
      },
      form: {
        m: 'user',
        avatar: '',
        nickname: '',
        qq: '',
        mail: '',
        phone: '',
        synopsis: ''
      },
      dataform: {}
    }
  },
  methods: {
    ...mapActions('user', ['setUserInfo']),
    // 文件上传成功时的钩子
    uplogSuccess (res) {
      this.form.avatar = res.url
    },
    //
    studentUploadSuccess (res) {
      this.student.studentcard.push({ url: res.url })
      console.log(this.student.studentcard)
      console.log(res.url)
    },
    // 文件列表移除文件时的钩子
    studentHandleRemove (file, fileList) {
      console.log(file, fileList)
      const b = this.student.studentcard.indexOf(file)
      this.student.studentcard.splice(b, 1)
      console.log(this.student.studentcard)
    },
    //
    companyUploadSuccess (res) {
      this.company.companyimg.push({ url: res.url })
      console.log(this.company.companyimg)
      console.log(res.url)
    },
    // 文件列表移除文件时的钩子
    companyHandleRemove (file, fileList) {
      console.log(file, fileList)
      const b = this.company.companyimg.indexOf(file)
      this.company.companyimg.splice(b, 1)
      console.log(this.company.companyimg)
    },
    // 学生认证
    onSubmitStudent () {
      this.dataform = JSON.stringify(this.student)
      this.dataform = JSON.parse(this.dataform)
      this.dataform.studentcard = JSON.stringify(this.dataform.studentcard)
      this.studentAndCompany(this.dataform.studentcard)
    },
    // 公司认证
    onSubmitCompany () {
      this.dataform = JSON.stringify(this.company)
      this.dataform = JSON.parse(this.dataform)
      this.dataform.companyimg = JSON.stringify(this.dataform.companyimg)
      this.studentAndCompany()
    },
    // 信息认证
    async studentAndCompany () {
      const result = await this.$axios.post('/webadmin/updateuser', this.qs.stringify(this.dataform))
      if (result.data.state.type === 'SUCCESS') {
        this.$message.success('信息提交成功等待审核')
      }
    },
    // 用户信息修改
    async onSubmit () {
      const result = await this.$axios.post('/webadmin/updateuser', this.qs.stringify(this.form))
      const data = result.data.data
      if (result.data.state.type === 'SUCCESS') {
        this.$message.success('成功')
        console.log(data.userInfo)
        this.setUserInfo(data.userInfo)
      }
    },
    // 获取用户信息
    async getUser () {
      const result = await this.$axios.post('/webadmin/getuser')
      this.form = result.data.data
      this.form.realstate = this.form.realstate * 1
      console.log(JSON.parse(this.form.studentcard))
      this.student = {
        m: 'student',
        realname: this.form.realname,
        studentid: this.form.studentid,
        studentcard: JSON.parse(this.form.studentcard)
      }
      if (this.form.studentcard == null) this.student.studentcard = []
      this.company = {
        m: 'company',
        companyname: this.form.companyname,
        companyimg: JSON.parse(this.form.companyimg)
      }
      if (this.form.companyimg == null) this.company.companyimg = []
      this.form.m = 'user'
    }
  },
  created () {
    this.getUser()
  }
}
</script>

<style scoped>

</style>
